<template>
    <div class="login-page" :style="{ backgroundImage: `url(${currentImg})` }">

        <div class="login-form">
            <div class="form-wrap">
                <div class="form-logo">
                    XKL
                </div>
                <form class="form_body">
                    <div class="hide-input">
                        <input type="text" />
                        <input type="password" />
                    </div>
                    <transition name="login">
                        <div class="form" v-if="isLogin">
                            <!-- <XklForm :form="form">
                            </XklForm> -->
                            <div class="form-item-label">User Name</div>
                            <div class="form-item mb-24">
                                <!-- <span class="label" :class="{ scale: form.userName }">username</span> -->
                                <input v-model="form.userName" placeholder="username" autocomplete="off" />
                            </div>
                            <div class="form-item-label">Password</div>
                            <div class="form-item">
                                <!-- <span class="label" :class="{ scale: form.password }">password</span> -->
                                <input :type="!passWordHied ? 'text' : 'password'" v-model="form.password"
                                    placeholder="password" autocomplete="off" />
                                <div @click="isHide" class="ml-10 pointer">
                                    <el-icon :size="20" v-if="passWordHied">
                                        <Hide />
                                    </el-icon>
                                    <el-icon :size="20" v-else>
                                        <View />
                                    </el-icon>
                                </div>
                            </div>
                            <div class="form-Forget mt-10">
                                <!-- @click.stop="isLogin = false" -->
                                <span>Forget Password?</span>
                            </div>
                            <div class="form-item-label">Captcha</div>
                            <div class="form-item mb-24 captcha-line">
                                <!-- <span class="label" :class="{ scale: form.userName }">username</span> -->
                                <input v-model="form.code" placeholder="captcha" />
                                <img @click="getCaptcha()" class="captcha" :src="captchaUrl" />
                            </div>
                            <div class="btn_wrap mt-36">
                                <el-button class=" login-button" style="width: 100%;" @click="login()">Login</el-button>
                                <!-- <el-button class="mt-20 forgot-button" style="width: 48%;">Forgot Password</el-button> -->
                            </div>

                        </div>
                    </transition>
                    <transition name="expand">
                        <PassWordEdit v-if="!isLogin" ref="PassWordEdit" @close="close" />
                    </transition>
                </form>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { Options } from 'vue-class-component'
import { BaseController } from '@xuekl/cli-base'
import { User } from '@/entity/system/user'
import CommonService from '@/service/common'
import { setToken } from '@/utils'
import { startPromise } from '@/router/index'
import useApp from '@/store/app'
import logo from '@/assets/logo.png'
import loginBg01 from '@/assets/login_bg01.png'
import loginBg02 from '@/assets/login_bg02.png'
import loginBg03 from '@/assets/login_bg03.png'
import loginBg04 from '@/assets/login_bg04.png'
import loginBg05 from '@/assets/login_bg05.png'
import loginBg06 from '@/assets/login_bg06.png'
import loginBg07 from '@/assets/login_bg07.png'
import loginBg08 from '@/assets/login_bg08.png'
import loginBg09 from '@/assets/login_bg09.png'
import { View, Hide } from '@element-plus/icons-vue'
import PassWordEdit, { ExposeParams } from './PassWordEdit.vue';


@Options({
    components: {
        View,
        Hide,
        PassWordEdit
    },
    created() {
        const imgIndex = Math.round(Math.random() * 8)
        this.currentImg = this.imgs[imgIndex]
        this.getCaptcha()
    },
    mounted() {
        var _self = this;
        document.onkeydown = function (e) {
            var key = e.code;
            if (key == 'Enter') {
                if (!_self.form.userName) return
                _self.login();
            }
        }
    },
    watch: {
        // passWord: {
        //     handler(val: string, oldVal: string) {
        //         const that = this as LoginView;
        //         if (val === '') {
        //             that.form.password = val
        //             return
        //         }
        //         //监听登录的密码输入框，将密文显示为*
        //         if (that.passWordHied) {
        //             that.passWord = val.replace(/./g, "*");
        //             if (oldVal.length > val.length) {
        //                 that.form.password = that.form.password.substring(0, that.form.password.length - 1);
        //             } else {
        //                 that.form.password += val.replace(/[*]/g, "")
        //             }
        //         } else {
        //             that.form.password = val
        //         }
        //     },
        //     deep: true
        // }
    },
    beforeUnmount() {
        document.onkeydown = null
    }
})
export default class LoginView extends BaseController {
    private commonService = new CommonService()
    appStore = useApp()
    passWord = ''
    form: User = new User({ mode: 'login', labelWidth: 100, span: 24 })
    imgs = [loginBg01, loginBg02, loginBg03, loginBg04, loginBg05, loginBg06, loginBg07, loginBg08, loginBg09]
    currentImg = loginBg01
    logo = logo
    passWordHied = true
    captchaUrl = ''
    captchUuid = ''
    isLogin = true
    //是否查看密码
    isHide() {
        this.passWordHied = !this.passWordHied
        // const password = this.form.password
        // if(this.passWordHied){// true 密码显示 *
        //     this.passWord = password.replace(/./g, "*");
        // }else{//false 密码显示文本
        //     this.passWord = password.replace(/[*]/g, "");
        // }
    }

    close(val) {
        this.isLogin = val
    }

    async login() {
        if (!this.form.userName || !this.form.password) {
            this.$message.warning('请输入用户名和密码')
            return
        }
        const { token, msg } = await this.commonService.login({
            username: this.form.userName,
            password: this.form.password,
            code: this.form.code,
            uuid: this.captchUuid,
            platformType: 0,//（0:pc端，1:小程序端）
        })
        if (token) {
            setToken(token)
            this.appStore.initMenus()
            startPromise()
            this.$router.replace({ path: '/home' })
            this.$message.success('登录成功')
        } else {
            this.$message.error(msg)
            this.getCaptcha()
            this.form.code = ''
        }
    }
    async getCaptcha() {
        const data = await this.commonService.getCaptcha({})
        this.captchaUrl = 'data:image/gif;base64,' + data.img
        this.captchUuid = data.uuid
    }

    goEdit() {
        (this.$refs['PassWordEdit'] as ExposeParams).init()
    }
}
</script>
<style lang="scss">
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    // background: url('../../../assets/login_bg.jpg') no-repeat;
    // background-size: cover;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .login-form {
        width: 450px;
        // height: 574px;
        // background-color: rgb(0, 0, 0, 0.4);
        // box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .12);
        padding: 56px 50px 82px 56px;
        border-radius: 50px;
        background: linear-gradient(90deg, rgba(52, 52, 56, 0.56) 0%, rgba(40, 43, 51, 0.70) 100%);
        // display: flex;
        // align-items: center;
        // justify-content: center;
        // flex-direction: column;

        // .form-wrap {

        // }

        .form-title {
            color: #fff;
            font-size: 48px;
            margin-bottom: 40px;
        }

        .form-logo {
            margin: 0 auto;
            width: 120px;
            height: 120px;
            margin-bottom: 30px;
            border-radius: 50%;
            background-color: #5A5C5B;
            display: flex;
            align-items: center;
            justify-content: center;
            color: $primary--color;
            font-size: 52px;
            overflow: hidden;
        }

        .form_body {
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;

            .hide-input {
                position: absolute;
                left: 200%;
            }
        }

        .form {
            flex: 1;
            color: #FFFFFF;
            line-height: normal;
            font-style: normal;
            font-weight: 400;

            .form-item-label {
                height: 27px;
                font-size: 18px;
            }

            .form-Forget {
                height: 18px;
                font-size: 12px;
                text-align: right;
                cursor: pointer;
                user-select: none;
            }

            .form-item {
                display: flex;
                // flex-direction: column;
                // justify-content: center;
                align-items: center;
                height: 50px;
                border-radius: 10px;
                border: 3px solid rgba(255, 255, 255, 0.40);
                background: #383D48;
                backdrop-filter: blur(10px);
                padding: 0 14px;
                position: relative;

                input {
                    flex: 1 0;
                }

                .label {
                    color: #aaa;
                    position: absolute;
                    top: 50%;
                    left: 24px;
                    transform: translateY(-50%);
                    transition: .3s;
                }

                .scale {
                    color: #ccc;
                    // font-size: 8px;
                    transform: scale(0.8);
                    transform-origin: 0 0;
                    // transform: translateY(-100%);
                    top: 2px;
                }

                input {
                    background: none;
                    border: 0;
                    outline: none;
                    color: #fff;
                    font-size: 12px;
                    width: 100%;
                    // position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 20px;
                    right: 0;
                    // padding-top: 10px;
                }

                .captcha {
                    height: 100%;
                    cursor: pointer;
                }
            }

            .captcha-line {
                padding-right: 0;
                overflow: hidden;
            }
        }

        .btn_wrap {
            display: flex;
            justify-content: space-between;
        }

        .login-button {
            display: block;
            background-color: #F47458;
            color: #fff;
            height: 46px;
            border: 0;
        }

        .forgot-button {
            background-color: #383d48;
            color: #fff;
            height: 46px;
            border: 0;
        }
    }
}

/* 1.修改过渡动画 */
@keyframes slide {
    from {
        transform: translateX(200%);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* 2. 过渡类名 */
/* 开始 */
.expand-enter-active {
    animation: slide 400ms;
}

/* 结束 */
.expand-leave-active {
    position: absolute;
    animation: slide 400ms reverse;
}



/* 1.修改过渡动画 */
@keyframes loginSlide {
    from {
        transform: translateX(-200%);
        opacity: 0;
    }

    to {
        transform: translateX(0px);
        opacity: 1;
    }
}

/* 2. 过渡类名 */
/* 开始 */
.login-enter-active {
    animation: loginSlide 400ms;
}

/* 结束 */
.login-leave-active {
    position: absolute;
    animation: loginSlide 400ms reverse;
}
</style>@/entity/system/user